<template>
  <el-container>
    <MapLayer />
    <el-aside width="320px" style="padding: 8px;">
      <OverlayDetail />
      <el-tooltip content="查看帮助文档" placement="left">
        <a href="/geojson/docs/" id="docs" target="_blank">
          <span class="icon icon-help"></span>
        </a>
      </el-tooltip>
    </el-aside>
  </el-container>
</template>

<script setup>
import MapLayer from './components/MapLayer.vue';
import OverlayDetail from './components/OverlayDetail.vue';

</script>

<style>
@font-face {
  font-family: 'iconfont';  /* Project id 2872894 */
  src: url('//at.alicdn.com/t/font_2872894_kbsepha5wv.woff2?t=1636013865613') format('woff2'),
       url('//at.alicdn.com/t/font_2872894_kbsepha5wv.woff?t=1636013865613') format('woff'),
       url('//at.alicdn.com/t/font_2872894_kbsepha5wv.ttf?t=1636013865613') format('truetype');
}
*{
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
}
#app {
  display: flex;
  height: 100%;
}
#sideBar{
  width: 320px;
}
#docs{
  position: fixed;
  bottom: 20px;
  right: 20px;
  text-decoration: none;
  color: rgb(117, 117, 117);
}
#docs .icon{
  font-size: 48px;
  color: rgb(126, 126, 126);
}
#docs .icon:hover{
  color: rgb(31, 107, 206);
}
.icon{
  font-family: 'iconfont';
  font-size: 20px;
  line-height: 20px;
  cursor: pointer;
  font-weight: bold;
  user-select: none;
  outline: none;
}
.icon-boundary:after{
  content: '\e7a9'; 
}
.icon-confirm:after{
  content: '\e618';
}
.icon-export:after{
  content: '\e791';
}
.icon-polygon:after{
  content: '\e67b';
}
.icon-ellipse:after{
  content: '\e610';
}
.icon-polyline:after{
  content: '\e68f';
}
.icon-edit:after{
  content: '\e609';
}
.icon-delete:after{
  content: '\e61c';
}
.icon-search:after{
  content: '\e8ef';
}
.icon-help:after{
  content: '\e752';
}
.icon-import:after{
  content: '\e792';
}
.icon-open:after{
  content: '\eddb'
}
.icon-save:after{
  content: '\eddc';
}
.icon-setting:after{
  content: '\e78e';
}
.icon-location:after{
  content: '\e793';
}
.icon-rect:after{
  content: '\e790';
}
.icon-selected{
  color: rgb(31, 107, 206);
}
.icon-disable{
  color: rgb(155, 155, 155);
  cursor: default;
}
</style>
